<template>
  <div class="page-content">
    <table-bar></table-bar>
    <!-- 顶部 -->
    <div>{{ProcessInfo.name}}</div>
    <!-- 内容 -->
    <div class="wrap">
      <!-- 左侧 -->
      <div class="left">
        <div class="left-header">
          <div class="title"
               style="margin-top: 0.0625rem">
            加工厂人员组成
          </div>
          <!-- <el-button style="padding: 0.375rem 0.3125rem"
                     type="primary"
                     @click="switchYear()">查看{{ pieSwitchTitle }}</el-button> -->
          <chart-bar style="width:100%;height:300px"
                     :option="roleOption"></chart-bar>
        </div>
        <div class="left-mid">
          <div class="title"
               style="margin-top: 0.0625rem">
            <!-- <i
                            class="el-icon-s-data"
                            style="margin-left: 0.1875rem"
                        ></i> -->
            产品数量走势
          </div>
          <el-button style="float: left; padding: 0.375rem 0.3125rem"
                     type="primary"
                     @click="toggle()">{{showNumByYear?'切换本月':'切换本年'}}</el-button>
          <chart-line style="width:100%;height:300px"
                      :option="option"></chart-line>
        </div>
      </div>
      <!-- 中间 -->
      <div class="center">
        <!-- 地图 -->
        <div class="center-map">
          <baidu-map style="width: 100%; height: 100%"
                     :adress="adress"></baidu-map>
        </div>
        <!--  加工厂出库信息表 -->
        <div class="center-offline">
          <div class="center-offline-header">
            <p>
              <i class="el-icon-s-order"></i>
              <span>加工厂{{isOutProcessingBill?"出库":"入库"}}信息表</span>
              <el-button size="mini"
                         type="primary"
                         @click="toggle">切换{{isOutProcessingBill?"入库":"出库"}}</el-button>
            </p>
          </div>
          <div class="center-offline-mid">
            <table class="tableData"
                   ref="table">
              <thead>
                <tr v-if="isOutProcessingBill">
                  <th>出库日期</th>
                  <th>经手人</th>
                  <th>收获人</th>
                  <th>总价</th>
                  <th>数量</th>
                </tr>
                <tr v-else>
                  <th>入库日期</th>
                  <th>入库地点</th>
                  <th>总价</th>
                  <th>数量</th>
                  <th>备注</th>

                </tr>
              </thead>
              <tbody v-if="isOutProcessingBill">
                <tr v-for="(item,index) in processingBill"
                    :key="index">
                  <td>{{item.outTime || '--'}}</td>
                  <td>{{item.handler}}</td>
                  <td>{{item.consignee}}</td>
                  <td>{{item.totalMoney || "--"}}</td>
                  <td>{{item.totalAmount}}</td>
                </tr>
              </tbody>
              <tbody v-else>
                <tr v-for="(item,index) in processingBill"
                    :key="index">
                  <td>{{item.enterTime || '--'}}</td>
                  <td>{{item.inStorage}}</td>
                  <td>{{item.totalMoney || "--"}}</td>
                  <td>{{item.source}}</td>
                  <td>{{item.totalRemark}}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="right">
        <div class="right-header">
          <span class="right-title">加工厂信息</span>
          <div class="right-top">
            <div class="right-top-content">
              <span class="name">
                <i class="el-icon-user"
                   style="font-size: 1.3rem; color: #218868"></i>
                负责人:</span>
              <span class="text">{{
                                ProcessInfo.principalName
                            }}</span>
            </div>
            <div class="right-top-content">
              <span class="name">
                <i class="el-icon-s-home"
                   style="font-size: 1.3rem; color: #3f51b5"></i>
                加工厂数量:</span>
              <span class="text">{{ ProcessInfo.numberOfDovecote || 18 }}座</span>
            </div>
            <div class="right-top-content">
              <span class="name">
                <i class="el-icon-s-custom"
                   style="font-size: 1.3rem; color: #03a9f4"></i>
                人员:</span>
              <span class="text">{{ ProcessInfo.numberOfBreeder  || 103}}位</span>
            </div>
            <div class="right-top-content">
              <span class="name">
                <i class="el-icon-star-on"
                   style="font-size: 1.3rem; color: #ffeb3b"></i>
                绩效冠军:</span>
              <span class="text">{{
                                ProcessInfo.theBestDovecote || 'T6棚'
                            }}</span>
            </div>
            <div class="right-top-content">
              <span class="name">
                <i class="el-icon-location-information"
                   style="font-size: 1.3rem; color: #ee5c42"></i>
                地址:</span>
              <span class="text">{{
                                ProcessInfo.province +
                                ProcessInfo.city +
                                ProcessInfo.detailedAddress || '暂无'
                            }}</span>
            </div>
          </div>
        </div>
        <div class="right-mid">
          <div class="right-mid-header">
            <i class="el-icon-s-comment"
               style="font-size: 1.125rem"></i>
            <span>加工厂库存信息表</span>
          </div>
          <div class="right-content">
            <ul>
              <li style="padding-right: 1.25rem; color: #dbdbdb"
                  class="messageList"
                  v-for="(item, index) in invList"
                  :key="index">
                <i style="
                                        margin-right: 1.25rem;
                                        width: 33.3%;
                                        text-align: center;
                                        color: #a3a3a3;
                                    ">{{ item.typeName}}</i>
                <i style="
                                        margin-right: 1.25rem;
                                        width: 33.3%;
                                        text-align: center;
                                        color: #a3a3a3;
                                    ">{{ item.price}}</i>
                <i style="
                                        margin-right: 1.25rem;
                                        width: 40%;
                                        text-align: center;
                                        color: #a3a3a3;
                                    ">{{ item.gmtCreate}}</i>
                <i style="
                                        margin-right: 0.5rem;
                                        width: 33.3%;
                                        text-align: center;
                                        letter-spacing: 0.09375rem;
                                    ">{{ item.remark }}</i>
                <!-- <i class="opt">
                  <el-button type="text"
                             style="font-size: 0.75rem width: 33.3%;"
                             @click="getMessage(item)">查看</el-button>
                </i> -->
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <Process-choice />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import ProcessChoice from '@/components/Process/ProcessChocie.vue'
import ChartLine from '@/components/Basic/ChartLine.vue'
import ChartBar from '@/components/Basic/ChartBar.vue'
import baiduMap from "@/components/Basic/baiduMap.vue"
import { dateShorter } from '@/utils/utils'

export default {
  name: "ProcesshouseShow",
  meta: {
    title: "加工展板",
  },
  created () {
    if (!this.ProcessInfo.name) {
      this.getProcess()
    }
    this.getOutProcessingBill()
    this.getInvList()
  },
  components: {
    ProcessChoice,
    ChartLine,
    ChartBar,
    baiduMap,
  },
  computed: {
    ...mapState({
      ProcessInfo: (state) => state.Usersetting.ProcessInfo,
    }),
    select_processingId () {
      return this.$store.state.Usersetting.ProcessInfo.processingId
    },
    adress () {
      return this.ProcessInfo.province +
        this.ProcessInfo.city +
        this.ProcessInfo.detailedAddress || ''
    }
  },
  data () {
    return {
      //月加工量走势
      option: {
        title: {
          text: ''
        },
        tooltip: {
          trigger: 'axis'
        },
        // legend: {
        //   data: []
        // },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '10%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          // 把刻度标签里面的文字颜色设置为白色
          axisLabel: {
            color: "#fff"
          },
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        yAxis: {
          type: 'value',
          // 把刻度标签里面的文字颜色设置为白色
          axisLabel: {
            color: "#fff"
          }
        },
        series: [
          {
            name: '最近一年',
            type: 'line',
            data: [0, 0, 0, 0, 290, 700, 910, 1200, 990, 1800, 2100, 0]
          }
        ]
      },
      //人员组成
      roleOption: {
        tooltip: {},
        xAxis: {
          data: ['加工人员', '清洁人员', '防疫人员'],
          axisLabel: {
            color: "#fff"
          },
        },
        yAxis: {
          axisLabel: {
            color: "#fff"
          },
        },
        series: [{
          type: 'bar',
          data: [25, 46, 12]
        }]
      },
      showNumByYear: true,
      isOutProcessingBill: true,
      processingBill: [],
      invList: [],
    };
  },
  methods: {
    //唤起选择加工厂面板
    getProcess () {
      this.$store.commit('isShowProcessChoice', 'Process')
    },
    async getOutProcessingBill () {
      const { data: res } = await this.$http.get(`/processing/out-processing/page/1/101?processingId=${'1'}`)
      if (res.statusCode !== 20000) return this.$message.error('获取加工厂出库信息失败')

      dateShorter(res.data.records, 'outTime')
      this.processingBill = res.data.records
    },
    async getInProcessingBill () {
      const { data: res } = await this.$http.get(`/processing/inProcessingInfo/list/1/102?processingId=${this.select_processingId}`)
      if (res.statusCode !== 20000) return this.$message.error('获取加工厂入库信息失败')

      dateShorter(res.data.records, 'enterTime')
      this.processingBill = res.data.records
    },
    async getInvList () {
      const { data: res } = await this.$http.get(`/processing/processingStorage/list/1/103?processingId=${'1'}`)
      if (res.statusCode !== 20000) return this.$message.error('查询库存列表失败')

      dateShorter(res.data.records, 'gmtCreate')
      this.invList = res.data.records
    },
    toggle () {
      if (this.isOutProcessingBill) {
        this.isOutProcessingBill = false
        return this.getInProcessingBill()
      }
      this.isOutProcessingBill = true
      return this.getOutProcessingBill()

    }
  },
};
</script>

<style lang="scss" scoped>
/*常用公共样式*/
.fl {
  float: left;
  display: inline;
}
.fr {
  float: right;
  display: inline;
}
.cf:before,
.cf:after {
  content: ' ';
  display: table;
}
.cf:after {
  clear: both;
}
.cf {
  *zoom: 1;
}
html {
  overflow-x: hidden;
}
.page-content {
  position: relative !important;
  background-color: #15213d !important;
  box-sizing: border-box;
}
.layui-laydate-main {
  background-color: #0f2b7b !important;
  color: #52d2ff !important;
}

.layui-laydate-header {
  border-bottom: 1px solid #52d2ff !important;
}

.layui-laydate-header i {
  color: #52d2ff !important;
}

.layui-laydate-content td {
  color: #52d2ff !important;
}

.layui-laydate-footer {
  border-top: 1px solid #52d2ff !important;
}

.laydate-footer-btns span {
  border: 1px solid #52d2ff !important;
  background-color: #0f2b7b !important;
}

.layui-laydate-content th {
  color: #52d2ff !important;
}

.layui-laydate-footer {
  background-color: #0f2b7b;
}

.laydate-footer-btns {
  color: #52d2ff;
}
.layui-laydate {
  border: 1px solid #52d2ff !important;
}
.history {
  display: block;
  margin-top: 0.030303rem;
  width: 100%;
  font-size: 0.070707rem;
  color: #4b7ae2;
  text-align: center;
  margin-bottom: 0.050505rem;
}
.modalpic {
  display: none;
}
.modal {
  display: none;
}
.modalpic,
.modal {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(58, 52, 52, 0.5);
}

.modal-content {
  width: 7.626263rem;
  height: 4.030303rem;
  background-color: rgba(5, 75, 154, 0.95);
  border: 1px solid #74fffd;
  position: absolute;
  top: 5%;
  right: 0;
  left: 0;
  margin: 0 auto;
}

.close {
  width: 0.232323rem;
  height: 0.232323rem;
  background-color: #052e71;
  border-left: 1px solid #74fffd;
  border-bottom: 1px solid #74fffd;
  position: absolute;
  top: 0;
  right: 0;
  text-align: center;
  color: #74fffd;
  font-size: 0.151515rem;
  line-height: 0.232323rem;
  cursor: pointer;
}
/* header */
.model-header {
  width: 100%;
  height: 0.353535rem;
  background: url('../../../../assets/image/header3.png') no-repeat;
  background-size: cover;
  text-align: center;
  line-height: 0.353535rem;
  color: #fff;
  font-size: 0.121212rem;
  letter-spacing: 2px;
  font-weight: 600;
}

.see {
  height: 0.212121rem;
  padding-left: 0.30303rem;
  padding-top: 0.20202rem;
  padding-right: 0.30303rem;
  margin-bottom: 0.227273rem;
}
.from {
  line-height: 0.20202rem;
}
.line {
  margin-right: 0.363636rem;
}
.line span {
  font-size: 0.10101rem;
  color: #3fccf7;
  font-weight: 600;
}
.line-content {
  width: 0.647364rem;
  height: 0.161616rem;
  background: url('../../../../assets/image/lishikuang2.png') no-repeat;
  background-size: cover;
  text-indent: 4px;
  color: #52d2ff;
  outline: none;
  border: none;
}

.submit {
  width: 0.535354rem;
  height: 0.212121rem;
}
.button {
  width: 100%;
  height: 100%;
  background: url('../../../../assets/image/chaxun.png') no-repeat;
  background-size: cover;
  border: none;
  outline: none;
  text-align: center;
  color: #fff;
  font-size: 0.111111rem;
  letter-spacing: 4px;
  cursor: pointer;
}
.query {
  margin-right: 0.20202rem;
}
.date {
  width: 6.979798rem;
  height: 2.818182rem;
  margin: 0 0.30303rem;
  padding-top: 0.242424rem;
  box-sizing: border-box;
  background: url('../../../../assets/image/lishikuang.png') no-repeat;
  background-size: cover;
}
.data-contentpic,
.date-content {
  width: 6.666667rem;
  height: 2.464646rem;
  background-color: rgba(0, 186, 255, 0.1);
  margin: 0 auto;
}

/* left neirong */
.wrap {
  height: 100%;
  width: 100%;
  display: flex;
}

.left {
  margin-right: 0.126263rem;
  width: 30%;
  box-sizing: border-box;
}

.left-mid,
.left-bottom,
.left-header {
  background: url('../../../../assets/image/kuang4.png') no-repeat;
  width: 100%;
  height: 25rem;
  position: relative;
  background-size: 100% 100%;
  margin-bottom: 1rem;
}

.left-bottom span,
.left-mid .title,
.left-header .title {
  color: #2b8fff;
  font-size: 1rem;
  font-weight: 600;
  padding-top: 0.315rem;
  padding-left: 0.375rem;
  box-sizing: border-box;
}
.left-header .el-button,
.left-mid .el-button {
  position: absolute;
  right: 10px;
  top: 38px;
  cursor: pointer;
}
.left-header .chart,
.left-mid .chart {
  position: absolute;
  top: 65px;
}

/* mid neirong */
.center {
  width: 39%;
  padding: 1.125rem;
  padding-top: 0;
  box-sizing: border-box;
  .center-map {
    width: 100%;
    height: 30rem;
    border: 1px solid #43dcff;
    margin-bottom: 0.10101rem;
    padding: 0.10101rem;
    box-sizing: border-box;
  }
  .center-offline {
    width: 100%;
    margin-top: 10px;

    .center-offline-header {
      width: 100%;
      height: 4rem;
      background: url('../../../../assets/image/kuang3.png') no-repeat center
        center;
      background-size: cover;
      text-align: center;
      p {
        font-size: 18px;
        color: #fff;
        line-height: 4rem;
        letter-spacing: 0.020202rem;
      }
    }
    .center-offline-mid {
      position: relative;
      width: 100%;
      height: 200px;
      box-sizing: border-box;
      overflow-y: auto;
      background-color: rgba(15, 52, 129, 0.3);
      .tableData {
        position: relative;
        width: 100%;
        line-height: 3rem;
        // thead{

        // }
        thead tr {
          color: #00ffff;
          font-size: 14px;
        }
        tbody tr {
          color: #fff;
          font-size: 11px;
        }
        thead tr th,
        tbody tr td {
          width: 20%;
        }
      }
    }
  }
}

.center-offline-header .sit {
  text-align: center;
  width: 25%;
}

.sit-title {
  font-size: 2rem;
  color: #52d2ff;
}
.list {
  height: 10rem;
  overflow: hidden;
}
.list-item {
  height: 0.176768rem;
}
.sit-item {
  font-size: 0.090909rem;
  color: #fff;
  width: 25%;
  text-align: center;
}
.center-offline-bottom {
  width: 4.277778rem;
  height: 0.232323rem;
  background-color: #04153b;
  text-align: center;
}

.center-offline-bottom p {
  color: #fff;
  line-height: 0.232323rem;
}

/* right neirong */
.right {
  width: 28%;
  height: 100%;
}
.right-header {
  background: url('../../../../assets/image/kuang4.png') no-repeat;
  width: 100%;
  height: 20rem;
  position: relative;
  background-size: 100% 100%;
  margin-bottom: 1rem;
}
.right .right-title {
  display: inline-block;
  box-sizing: border-box;
  color: #2b8fff;
  font-size: 1.3rem;
  font-weight: 600;
  padding-top: 0.5rem;
  padding-left: 1rem;
  letter-spacing: 0.1rem;
}

.right-top {
  padding-left: 1rem;
  box-sizing: border-box;
}

.right-top-content {
  margin-top: 1.5rem;
}

.right-top:nth-last-child(1) {
  margin-top: none;
}

.right-top-content .name {
  font-size: 1.1rem;
  color: #52d2ff;
  margin-right: 0.050505rem;
  letter-spacing: 0.05rem;
  box-sizing: border-box;
}

.right-top-content .text {
  font-size: 1rem;
  color: #fff;
  letter-spacing: 0.1rem;
}

.right-mid {
  margin-top: 0.10101rem;
  ::-webkit-scrollbar {
    width: 10px !important;
    border-radius: 0.050505rem;
  }
  ::-webkit-scrollbar-track-piece {
    background-color: rgba(13, 42, 121, 0.75) !important;
  }
  .right-content::-webkit-scrollbar-thumb {
    background-color: #274cb1 !important;
    border-radius: 0.050505rem;
    width: 0.070707rem;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: #274cb1 !important;
  }

  ::-webkit-scrollbar-thumb:active {
    border: 0;
    border-radius: 0;
    background-color: #274cb1 !important;
  }

  .right-content {
    height: 320px;
    overflow-y: auto;
    background-color: rgba(15, 52, 129, 0.3);
    .messageList {
      position: relative;
      display: flex;
      align-items: center;
      height: 1.875rem;
      margin-bottom: 0.3125rem;
      padding-right: 0px;
      border-bottom: 0.0625rem solid #6e747a;
      .opt {
        position: absolute;
        right: 2.5rem;
      }
    }
  }
}

.right-mid-header {
  background: url('../../../../assets/image/jianbian.png') no-repeat;
  background-size: 100% 100%;
  margin-top: 2rem;
  margin-bottom: 0.2rem;
  width: 100%;
  height: 3rem;
  line-height: 3rem;
  color: #00ffff;
  font-size: 1rem;
  padding-left: 1rem;
  box-sizing: border-box;
  font-weight: 500;
}

.right-mid-scroll {
  padding-left: 0.10101rem;
  margin-top: 0.10101rem;
  height: 10rem;
  width: 90%;
  box-sizing: border-box;
  overflow-y: scroll;
}

.right-mid-content {
  width: 100%;
  height: 2.020202rem;
}

.right-bottom-content {
  width: 2.186869rem;
  height: 1.363636rem;
  margin: 0.040505rem 0.10101rem 0.030303rem 0.10101rem;
  padding: 0.020202rem 0.050505rem;
  box-sizing: border-box;
  border: 1px solid #43dcff;
  overflow: hidden;
}

.right-bottom-content img {
  width: 100%;
  height: 98%;
}

/*  lishijilu*/
.history {
  display: block;
  margin-top: 0.030303rem;
  width: 100%;
  font-size: 0.070707rem;
  color: #4b7ae2;
  text-align: center;
  margin-bottom: 0.050505rem;
}

.history-pic {
  display: block;
  width: 100%;
  font-size: 0.070707rem;
  color: #4b7ae2;
  text-align: center;
}

/* 去除水印 */
.anchorBL {
  display: none;
}
</style>